<template>
  <div class="myWallet">
    <topUserHead :infoData="infoData"></topUserHead>
    <div class="cellBox">
      <van-cell-group :border="false">
        <van-cell title="我的升级积分" :value="infoData.upgrade_point" is-link @click="toLink('Integral_love_detail')" />
        <van-cell title="我的ID积分" :value="infoData.id_point" is-link @click="toLink('integrallist')" />
        <van-cell title="我的V积分" :value="infoData.v_point" is-link @click="toLink('integral_list', { type: 'v_point' })" />
        <van-cell title="我的云积分" :value="infoData.cloud_point" is-link @click="toLink('integral_list', { type: 'cloud_point' })" />
      </van-cell-group>
    </div>
    <div class="cellBox">
      <van-cell-group :border="false">
        <van-cell title="我的居民/城主" :value="infoData.man_sum" is-link @click="to_subordinate" />
        <van-cell title="中台基金" :value="infoData.dividend_value" is-link @click="toLink('integral_list', { type: 'middleground' })" />
        <van-cell title="今日分红" :value="infoData.dividend_price" is-link @click="toLink('integral_list', { type: 'today_dividend' })" />
        <van-cell title="总分红分数" :value="infoData.dividend_count_total" is-link @click="toLink('integral_list', { type: 'total_dividend' })" />
      </van-cell-group>
    </div>
    <div class="cellBox">
      <van-cell-group :border="false">
        <template v-if="infoData.type != 1">
          <van-cell :title="'拥有城主身份数量：' + infoData.child_id_total" value="查看详情" is-link @click="Sub_account_go" />
          <van-cell :title="'兑换城主身份证号'" value="点击兑换" is-link @click="to_Sub_account_buy" />
        </template>
        <template v-if="infoData.type == 3">
          <van-cell :title="'管理者：' + infoData.manager" value="更换" is-link @click="changeManagerOpen" />
          <van-cell :title="'员工数量：' + infoData.staff_sum" value="查看详情" is-link @click="to_staffManagement" />
        </template>
        <template v-if="infoData.type == 4">
          <van-cell :title="'员工数量：' + infoData.staff_sum" value="查看详情" is-link @click="to_staffManagement" />
        </template>
      </van-cell-group>
    </div>
    <!-- <div class="optionsBox">
      <div class="optionsline" @click="Sub_account_go">
        <div class="optionsline_l">拥有城主身份数量：{{ infoData.child_id_total }}</div>
        <div class="optionsline_r">查看详情<i class="iconfont icon-icon_more11"></i></div>
      </div>
      <div class="optionsline" @click="to_Sub_account_buy">
        <div class="optionsline_l">出售城主身份累计收入：{{ infoData.sell_child_id_amount_sum }}</div>
        <div class="optionsline_r">购买<i class="iconfont icon-icon_more11"></i></div>
      </div>
    </div>
    <div class="optionsBox" v-if="infoData.type == 3 || infoData.type == 4">
      <div class="optionsline" @click="changeManagerOpen" v-if="infoData.type == 4">
        <div class="optionsline_l">管理者：{{ infoData.manager }}</div>
        <div class="optionsline_r">更换<i class="iconfont icon-icon_more11"></i></div>
      </div>
      <div class="optionsline" @click="to_staffManagement" v-if="infoData.type == 3 || infoData.type == 4">
        <div class="optionsline_l">员工人数：{{ infoData.staff_sum }}</div>
        <div class="optionsline_r">查看详情<i class="iconfont icon-icon_more11"></i></div>
      </div>
    </div> -->

    <!-- <van-tabs v-model="active" background="#F5F5F5" line-width="0.94rem" title-active-color="#F15353" @change="TabChange">
      <van-tab title="往期分红记录"></van-tab>
      <van-tab title="退休业绩奖励记录" v-if="infoData.type != 1"></van-tab>
    </van-tabs>
    <div class="list">
      <template v-if="active == 0">
        <div class="lis" v-for="(item, index) in listRecord" :key="index">
          <div class="list_top">
            <div class="list_top_l"></div>
            <div class="list_top_r">{{ item.price }}</div>
          </div>
          <div class="list_bottom">
            <div class="list_bottom_line">
              <div class="list_bottom_line_l">本期分红红池累计：{{ item.total_price }}</div>
              <div class="list_bottom_line_r">总分红份数：{{ item.total_count }}</div>
            </div>
            <div class="list_bottom_line">
              <div class="list_bottom_line_l">个人分红份数：{{ item.count }}</div>
              <div class="list_bottom_line_r">{{ item.dividend_time }}</div>
            </div>
          </div>
        </div>
      </template>
      <template v-if="active == 1">
        <div class="lisTwo" v-for="(item, index) in listRecord" :key="index">
          <div class="lis_l">
            <div class="lis_l_l">分红ID: {{ item.retire_id }}</div>
            <div class="lis_l_t">{{ item.dividend_time }}</div>
          </div>
          <div class="lis_r">{{ item.price }}</div>
        </div>
      </template>
      <van-empty image="search" description="暂无更多" v-if="listRecord.length <= 0" />
    </div> -->
    <van-popup v-model="changeManager" position="bottom" round :style="{ height: '20.44rem' }">
      <van-nav-bar title="更换管理者" @click-left="onClickLeft" @click-right="onClickRight">
        <template #left>
          <span class="cancelTxt">取消</span>
        </template>
        <template #right>
          <span>确定</span>
        </template>
      </van-nav-bar>
      <div class="changeManagerBox">
        <div class="cellbox">
          <div class="title">管理者手机号</div>
          <input type="text" class="inpc" placeholder="请输入" v-model="managerMobile" />
        </div>
        <div class="cellbox">
          <div class="title">管理者身份证号</div>
          <input type="text" class="inpc" placeholder="请输入" v-model="managerIdCard" />
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import { scrollMixin } from "utils/mixin";
import topUserHead from "./components/topUserHead.vue";
export default {
  mixins: [scrollMixin],
  data() {
    return {
      active: 0,
      changeManager: false,
      managerMobile: "",
      managerIdCard: "",
      infoData: [],
      listRecord: [],

      isLoadMore: true,
      page: 1,
      total_page: 0
    };
  },
  activated() {
    this.getData();
  },
  methods: {
    to_subordinate() {
      this.$router.push(this.fun.getUrl("subordinate"));
    },
    toLink(link, params = {}) {
      this.$router.push(this.fun.getUrl(link, params));
    },
    onClickLeft() {
      this.changeManager = false;
      this.managerMobile = "";
      this.managerIdCard = "";
    },
    changeManagerOpen() {
      this.managerMobile = "";
      this.managerIdCard = "";
      this.changeManager = true;
    },
    async onClickRight() {
      let { data, result, msg } = await $http.post("plugin.project-party.frontend.controllers.index.changeManager", { tel: this.managerMobile, id_no: this.managerIdCard }, "加载中");
      if (result) {
        this.getData();
        this.changeManager = false;
      } else {
        this.$toast(msg);
      }
    },
    to_staffManagement() {
      this.$router.push(this.fun.getUrl("staffManagement_idShop"));
    },
    Sub_account_go() {
      this.$router.push(this.fun.getUrl("Sub_account"));
    },
    to_Sub_account_buy() {
      this.$router.push(this.fun.getUrl("Sub_account_buy"));
    },
    toUpdateLeave() {
      // 去升级成为红人
      this.$router.push(this.fun.getUrl("idShop_apply", { tabActive: "1" }));
    },
    async getData() {
      let { data, msg, result } = await $http.post("plugin.project-party.frontend.controllers.index.index", {}, "");
      // data.type 1达人 2个人红人 3企业红人 4企业管理者 5企业员工
      if (result) {
        if (data.man_type == 0) {
          this.$dialog
            .confirm({
              title: "提示",
              message: "点击确认跳转申请页面",
              showCancelButton: false
            })
            .then(() => {
              this.$router.replace(this.fun.getUrl("idShop_apply"));
            });
          return;
        }
        this.infoData = data;
        // this.getRecord();
      } else {
        this.$toast(msg);
      }
    },
    async TabChange() {
      this.getRecord();
    },
    async getRecord() {
      // 默认往期分红
      let urlstr = "";
      if (this.infoData.type == 1) {
        // 达人只有一个分红列表
        urlstr = "plugin.project-party.frontend.controllers.index.bonusLog";
      } else {
        if (this.active == 1) {
          urlstr = "plugin.project-party.frontend.controllers.index.performance";
        } else {
          urlstr = "plugin.project-party.frontend.controllers.index.bonusLog";
        }
      }
      console.log(urlstr);
      let { data, msg, result } = await $http.post(urlstr, {}, "");
      if (result) {
        this.listRecord = data.list?.data ? data.list?.data : [];
        this.total_page = data.list?.pages;
        if (!this.total_page) {
          this.total_page = 0;
        }
        this.isLoadMore = true;
      } else {
        this.$toast(msg);
      }
    },
    getMoreData() {
      let urlstr = "";
      if (this.infoData.type == 1) {
        urlstr = "plugin.project-party.frontend.controllers.index.bonusLog";
      } else {
        if (this.active == 1) {
          urlstr = "plugin.project-party.frontend.controllers.index.performance";
        } else {
          urlstr = "plugin.project-party.frontend.controllers.index.bonusLog";
        }
      }
      if (!this.isLoadMore) return;
      this.isLoadMore = false; // 防止多次请求分页数据
      if (this.page >= this.total_page) {
        return;
      } else {
        this.page += 1;
        let json = {
          page: this.page
        };
        $http
          .get(urlstr, json, "加载中")
          .then(res => {
            this.isLoadMore = true;
            if (res.result == 1) {
              console.log(res.data);
              this.listRecord = this.list.concat(res.data.list.data);
            } else {
              this.page = that.page - 1;
              this.isLoadMore = false;
            }
          })
          .catch(error => {
            console.log(error);
          });
      }
    }
  },
  components: { topUserHead }
};
</script>
<style lang="scss" scoped>
.myWallet {
  padding-bottom: 2rem;
}
.list {
  margin: 0.75rem;
  // 退休业绩奖励记录

  .lisTwo {
    padding: 0.75rem;
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 0.5rem;
    display: flex;
    font-size: 0.88rem;
    font-weight: 500;
    .lis_l {
      flex: 1;
      text-align: left;
      .lis_l_t {
        font-size: 0.81rem;
        color: #818181;
        margin-top: 0.63rem;
      }
    }
    .lis_r {
      flex-shrink: 0;
    }
  }
  .lis {
    padding: 0.75rem;
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
    .list_bottom {
      padding-top: 0.81rem;
      box-sizing: border-box;
      .list_bottom_line {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 0.81rem;
        color: #818181;
        margin-bottom: 0.5rem;
      }
      .list_bottom_line:last-child {
        margin-bottom: 0;
      }
    }
    .list_top {
      font-size: 0.88rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 0.97rem;
      border-bottom: 1px solid #f0f0f1;
      .list_top_l {
        font-weight: bold;
      }
      .list_top_r {
        font-weight: 500;
      }
    }
  }
}
.cellBox {
  background: #ffffff;
  border-radius: 0.5rem;
  margin: 0 0.75rem;
  margin-top: 0.63rem;
  padding: 0.25rem 0;
  .van-cell {
    padding: 10px 0.78rem;
  }
  .van-cell__title {
    text-align: left;
  }
}
.cancelTxt {
  color: #aaaab3;
}
.changeManagerBox {
  .cellbox {
    margin: 0 0.94rem;
    margin-top: 1.59rem;
    display: flex;
    flex-direction: column;
    .title {
      text-align: left;
      font-size: 0.88rem;
      font-weight: 500;
      margin-bottom: 0.69rem;
    }
    .inpc {
      border: 1px solid #d6d6dc;
      border-radius: 0.5rem;
      height: 3rem;
      text-indent: 0.69rem;
    }
  }
}
</style>
